import React from "react";
import { useNavigate } from "react-router-dom";
import request from "../utils/request";
import { Button, Checkbox, Form, Input, message } from "antd";
import { useDispatch } from "react-redux";
import { changeUserInfo } from "../../store/counterSlice";
import "./login.css";
function Login() {
  let navigate = useNavigate();
  const dispatch = useDispatch();
  const onFinish = (values) => {
    console.log("Success:", values);
    request.post("/login", values).then((res) => {
      localStorage.setItem("token", res.data.token);
      localStorage.setItem("account", values.account);
      //   完成登录功能，将用户信息存储在仓库（使用redux-toolkit）
      dispatch(changeUserInfo(values.account));
      navigate("/");
      message.success("登录成功");
    });
  };
  return (
    <div className="Bigbox">
      <div className="box">
        <h3>物联网综合业务支撑云平台</h3>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="account"
            rules={[{ required: true, message: "请输入用户名!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "请输入密码!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked" label={null}>
            <Checkbox>记住我</Checkbox>
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Login;
